<template>
  <div style="height: 6vh;background-color:#fff;padding: 10px 20px;">
    <span style="line-height:60px;font-size:20px;">住院记录管理</span>
    <el-button type="primary" style="float: right;margin-top: 10px;"
               @click="beforeAddRecord">新增住院记录</el-button>
  </div>
  <!-- 新增住院记录 -->
  <!-- :before-close="handleClose" 在弹窗关闭前先调用handleClose方法来处理弹窗的关闭问题
   避免点击弹窗外部也能关闭弹窗-->
  <el-dialog
      :title="dialogTitle"
      style="width: 1000px;padding: 40px;"
      v-model="dialogVisible"
      :before-close="handleClose"
  >
    <el-form label-position="top" label-width="80px">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="老人姓名">
            <el-input placeholder="请输入老人姓名" v-model="saveRecordForm.username"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="床位">
            <el-input placeholder="请输入床位" v-model="saveRecordForm.bedId"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="入住类型" style="width: 200px;">
            <el-select placeholder="请选择入住类型" v-model="searchRecordForm.type">
              <el-option v-for="item in typeArr" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="入院时间">
            <el-date-picker type="date" format="YYYY-MM-DD" @change="validateDate"
                            value-format="YYYY-MM-DD" v-model="saveRecordForm.checkInTime"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="离院时间">
            <el-date-picker type="date" format="YYYY-MM-DD" @change="validateDate"
                            value-format="YYYY-MM-DD" v-model="saveRecordForm.checkOutTime"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="router.push('/healthe')">去评估</el-button>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveRecord">保存</el-button>
    </template>
  </el-dialog>

  <!-- 个人物品搜索卡片 -->
  <el-card style="margin: 20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="老人姓名" style="width: 200px;">
        <el-input placeholder="输入老人姓名" v-model="searchRecordForm.username" @keydown.enter="loadRecord"></el-input>
      </el-form-item>
      <el-form-item label="入住状态" style="width: 200px;">
        <el-select placeholder="请选择入住状态" v-model="searchRecordForm.status" @change="loadRecord">
          <el-option v-for="item in statusArr" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="审核状态" style="width: 200px;">
        <el-select placeholder="请选择审核状态" v-model="searchRecordForm.reviewStatus" @change="loadRecord">
          <el-option v-for="item in appStatusArr" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="入住类型" style="width: 200px;">
        <el-select placeholder="请选择入住类型" v-model="searchRecordForm.type" @change="loadRecord">
          <el-option v-for="item in typeArr" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadRecord">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 个人物品表格卡片 -->
  <el-card style="margin: 20px;">
    <el-table :data="recordArr">
      <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
      <el-table-column prop="username" label="老人" align="center"></el-table-column>
      <el-table-column prop="bedName" label="床位" align="center"></el-table-column>
      <el-table-column prop="type" label="入住类型" align="center" :formatter="checkInTypeFormatter"></el-table-column>
      <el-table-column prop="status" label="入住状态" align="center" :formatter="statusFormatter"></el-table-column>
      <el-table-column prop="reviewStatus" label="审核状态" align="center" :formatter="appStatusFormatter"></el-table-column>
      <el-table-column prop="checkInTime" label="入院时间" align="center"></el-table-column>
      <el-table-column prop="checkOutTime" label="离院时间" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="editRecord(scope.row.id)">编辑</el-button>
          <el-button link type="primary" @click="deleteRecord(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";
import router from "@/router";

//对入住状态显示内容进行文字转换
const statusFormatter = (row,column,cellValue,index)=>{
  if(!statusArr.value){
    return cellValue;
  }
  for(let item of statusArr.value){
    if(item.value == cellValue){
      cellValue = item.label;
    }
  }
  return cellValue;
}

//对审核状态显示内容进行文字转换
const appStatusFormatter = (row,column,cellValue,index)=>{
  if(!appStatusArr.value){
    return cellValue;
  }
  for(let item of appStatusArr.value){
    if(item.value == cellValue){
      cellValue = item.label;
    }
  }
  return cellValue;
}

//对入住类型显示内容进行文字转换
const checkInTypeFormatter = (row,column,cellValue,index)=>{
  if(!typeArr.value){
    return cellValue;
  }
  for(let item of typeArr.value){
    if(item.value == cellValue){
      cellValue = item.label;
    }
  }
  return cellValue;
}

//定义变量控制弹窗是否出现
const dialogVisible = ref(false);
//定义变量用来控制弹窗的标题
const dialogTitle = ref('新建个人物品');

//定义对象用来收集保存表单的所有个人物品数据
const saveRecordForm = ref({
  username:'',
  bedId:'',
  type:'',
  checkInTime:'',
  checkOutTime:'',
});
/* 点击"新增住院记录"按钮,出弹窗+修改弹窗标题 */
const beforeAddRecord = ()=>{
  dialogVisible.value = true;
  dialogTitle.value = '新增住院记录';
}
//定义保存床位的方法
const saveRecord = ()=>{
  console.log(saveRecordForm.value);
  /* 安装查询字符串框架qs  npm install qs
  使用qs框架将JS对象转为查询字符串格式 name=tom&age=18,注意qs需要导入!!! import qs from "qs"; */
  let data = qs.stringify(saveRecordForm.value);
  console.log(data);
  //向后端发送保存个人物品的请求
  /* 此处传的参数是qs转换后的查询字符串data,注意:使用了查询字符串,后端Controller不用加@RequestBody注解!!! */
  axios.post(BASE_URL+'/v1/checkIn/record/save',data)
      .then((response)=>{
        if(response.data.code == 2000){
          ElMessage.success('保存成功!');
          //关闭弹窗,并清空双向绑定的表单数据
          dialogVisible.value = false;
          saveRecordForm.value = {};
          //保存成功后要重新加载个人物品数据!
          loadRecord();
        }else{
          ElMessage.error(response.data.msg);
        }
      })
}
//处理弹窗关闭的方法
const handleClose = ()=>{
  if(confirm('您确认要关闭本窗口吗?')){
    //关闭弹窗,并清空双向绑定的表单数据
    dialogVisible.value = false;
    saveRecordForm.value = {};
  }
}

//定义对象用来保存个人物品的查询条件
const searchRecordForm = ref({username:'', bedId:'',status:'',reviewStatus:'',type:''});
//定义对象保存查询到的个人物品表格数据
const recordArr = ref([]);
//定义加载个人物品的方法
const loadRecord = ()=>{
  let data = qs.stringify(searchRecordForm.value);//username=tom&status=1
  //如果有查询条件,就根据后面拼接的条件查,没有条件默认加载所有物品数据
  axios.get(BASE_URL+'/v1/checkIn/record/select?'+data)
      .then((response)=>{//回调函数中处理响应结果
        if(response.data.code == 2000){
          recordArr.value = response.data.data;//将后端响应数据装入个人物品数组中
          console.log(recordArr.value);
        }else{
          ElMessage.error(response.data.msg);
        }
      })
}
//定义重置搜索条件的方法
const resetSearch = ()=>{
  //清空之前的搜索条件
  searchRecordForm.value = {};
  //重新加载所有的个人物品数据
  loadRecord();
}

/* 页面一加载完毕,立即执行 */
onMounted(()=>{
  loadRecord();
})
onMounted(()=>{
  loadDictOption(statusArr,'check_in_status');
  loadDictOption(appStatusArr,'application_status');
  loadDictOption(typeArr,'check_in_type');
})
//定义数组用来保存入住状态和审核状态、入住类型的字典项数据
const statusArr = ref([]);
const appStatusArr = ref([]);
const typeArr = ref([]);

//定义编辑个人物品的方法
const editRecord = (id)=>{
  //出弹窗 + 修改弹窗标题
  dialogVisible.value = true;
  dialogTitle.value = '编辑个人物品';
  //根据物品清单id查询当前个人物品的详细数据显示在弹窗表单中
  axios.get(BASE_URL+'/v1/checkIn/record/select?id='+id).then((response)=>{
    if(response.data.code == 2000){
      //注意:后端返回的是List<belongingsVO>,所以查一条数据的话拿的是集合的第1个元素,data[0]等价list.get(0)
      saveRecordForm.value = response.data.data[0];
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}

//创建删除物品清单的方法
const deleteRecord = (id)=>{
  if(confirm('您确认要删除该物品清单吗?')){
    axios.post(BASE_URL+'/v1/checkIn/record/delete/'+id)
        .then((response)=>{
          if(response.data.code == 2000){
            ElMessage.success('删除成功!');
            loadRecord();//重新加载物品清单数据
          }else{
            ElMessage.error(response.data.msg);
          }
        })
  }
}

//定义校验入院时间与退院时间的先后顺序方法
const validateDate = ()=>{
  const checkInTime = saveRecordForm.value.checkInTime;//入院时间
  const checkOutTime = saveRecordForm.value.checkOutTime;//退院时间
  if(checkOutTime && checkInTime && new Date(checkOutTime) <= new Date(checkInTime)){
    ElMessage.error('退院时间不能早于入院时间!');
    saveRecordForm.value.regTime = '';
  }
}
</script>

<style scoped>

</style>
